<template>
	<view class="screen">
		<input class="'uni-input''f500''s24'" v-model="screenVal" placeholder-style="color:#ccc;" placeholder="请输入名字或者电话" @blur="onblur" />
		<view class="screen_img">
			<image class="w100 h100" src="@/static/shopping/search.png"></image>
		</view>
		<view class="list_box w100" v-for="(item, index) in list" :key="index" @click="getReferrer(item)">
			<view class="list w100 flex">
				<view class="toux_box">
					<image class="img" :src="item.avatar"></image>
				</view>
				<view class="txt_box f500 s28 family">{{ item.name || item.nickname }}&nbsp;&nbsp;&nbsp;({{ item.mobile.slice(7, 11) }})</view>
			</view>
		</view>
		<uni-popup ref="tjr" type="center">
			<view
				style="
					width: 600rpx;
					min-height: 270rpx;
					max-height: 100%;
					background: linear-gradient(rgba(235, 190, 135, 0.2), rgba(255, 255, 255, 1) 100%), rgba(255, 255, 255, 1);
					border-radius: 32rpx;
					display: flex;
					flex-direction: column;
					padding: 20rpx 0;
					position: relative;
				"
			>
				<view style="text-align: center; font-size: 32rpx; color: #333; font-weight: 600; margin-top: 25rpx">新增推荐人</view>
				<uni-icons type="clear" size="30" color="#e9ddcf" style="position: absolute; top: 24rpx; right: 20rpx" @click="$refs.tjr.close()"></uni-icons>

				<view style="width: 540rpx; margin: 0 auto; margin-top: 44rpx">
					<view style="border-radius: 48rpx; height: 68rpx; width: 100%; margin-top: 40rpx; border: 1px solid rgba(205, 205, 205, 1); display: flex; align-items: center">
						<view style="width: 100%; padding-left: 30rpx; font-size: 28rpx; color: #666">
							{{ selectItem.name }}
						</view>
					</view>
					<view style="border-radius: 48rpx; height: 68rpx; width: 100%; margin-top: 40rpx; border: 1px solid rgba(205, 205, 205, 1); display: flex; align-items: center">
						<view style="width: 100%; padding-left: 30rpx; font-size: 28rpx; color: #666">
							{{ selectItem.nickname }}
						</view>
					</view>
					<view style="border-radius: 48rpx; height: 68rpx; width: 100%; margin-top: 40rpx; border: 1px solid rgba(205, 205, 205, 1); display: flex; align-items: center">
						<view style="width: 100%; padding-left: 30rpx; font-size: 28rpx; color: #666">
							{{ selectItem.mobile }}
						</view>
					</view>
					<view class="flex">
						<view class="flex-1 flex align-center .scrollnobar" style="overflow-x: scroll; margin-top: 20rpx">
							<view class="flex flex-column align-center" style="margin-right: 24rpx">
								<view class="" style="font-size: 0; display: flex">
									<view class="xianji_img_two" v-for="(item, index) in images" :key="index">
										<image class="w100 h100" :src="item"></image>
										<view class="delimg" @click="delImg(index)"></view>
									</view>
									<view class="up_img_box" @click="upImg" v-if="images.length <= 4">
										<view class="xianji_img" style="text-align: center">
											<uni-icons type="plusempty" size="24"></uni-icons>
											<view style="font-size: 24rpx; color: #999">见证(添加图片)</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="font-family: AppleSystemUIFont; font-size: 24rpx; color: #333333; line-height: 30rpx; text-align: justify; padding-top: 32rpx">
						<text style="color: #ff0000">*</text>
						拍摄推荐人带客入店凭证或相关证据，必要时拍摄推荐人身份证件以便核查推荐人的真实性!
					</view>
					<view
						style="
							border-radius: 48rpx;
							height: 68rpx;
							width: 100%;
							color: #fff;
							text-align: center;
							line-height: 68rpx;
							font-size: 28rpx;
							margin-top: 40rpx;
							background: rgba(235, 190, 135, 1);
						"
						@click="handeSubmit"
					>
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			screenVal: '',
			list: [],
			shopId: 0,
			images: [],
			selectItem: {},
			orderId: 0,
			index: 0
		};
	},
	onLoad(option) {
		this.shopId = option.shopId;
		this.orderId = option.orderId;
		this.index = option.index;
		this.shopType = option.shopType;
		this.listIndex = option.listIndex;
	},
	methods: {
		// 返回上一页携带参数
		getReferrer(item) {
			this.selectItem = item;
			this.$refs.tjr.open();
		},
		// 获取搜索人列表
		getList() {
			if (this.screenVal == '') {
				return;
			}
			let that = this;
			that
				.$request({
					url: 'shop/get_reff_user',
					method: 'POST',
					data: {
						shop_id: that.shopId,
						keyword: that.screenVal
					}
				})
				.then((res) => {
					if (res.statusCode == 200) {
						that.list = res.data.data;
					}
				});
		},
		onblur() {
			this.getList();
		},
		// 上传图片
		upImg() {
			this.$upLoadImage()
				.then((res) => {
					this.images.push(res.fullurl);
				})
				.catch((error) => {
					return false;
				});
		},
		//删除图片
		delImg(index) {
			this.images = this.images.filter((item, i) => i != index);
		},
		// 保存
		handeSubmit() {
			if (this.images.length == 0) {
				return uni.showToast({
					title: '最少上传1张图片！',
					icon: 'none'
				});
			}
			let data = {
				shop_id: this.shopId,
				order_id: this.orderId,
				reff_id: this.selectItem.user_id,
				img_list: this.images.toString()
			};
			let _this = this;
			this.$request({
				url: 'shop/add_order_recomm',
				method: 'POST',
				data: data
			}).then((res) => {
				if (res.data.code == 1) {
					uni.showModal({
						title: '提交成功，等待审核',
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								uni.redirectTo({
									url: `/pages/filePages/orderManagement/orderManagement?shopId=${_this.shopId}&index=${_this.index}&shopType=${_this.shopType}&listIndex=${_this.listIndex}`
								});
							}
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.screen {
	overflow: hidden;

	.uni-input {
		width: 608upx;
		height: 68upx;
		background: #ffffff;
		border-radius: 8upx 8upx 8upx 8upx;
		background-color: #eee;
		font-family: PingFang SC-Medium, PingFang SC;
		color: #000;
		padding-left: 78upx;
		margin: 20upx auto;
	}

	.screen_img {
		width: 40upx;
		height: 40upx;
		position: relative;
		left: 52upx;
		top: -74upx;
	}

	.list_box {
		margin-bottom: 20upx;

		.list {
			width: 686upx;
			height: 96upx;
			background-color: #f4f4f4;
			border-radius: 10upx;
			margin: 0 auto;

			.toux_box {
				width: 80upx;
				height: 80upx;
				margin-top: 7upx;
				margin-left: 10upx;

				.img {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}
			}

			.txt_box {
				color: #000000;
				line-height: 96upx;
				margin-left: 20upx;
			}
		}
	}
}
.xianji_img_two {
	width: 224upx;
	height: 224upx;
	background: #f1f1f1;
	border-radius: 20upx 20upx 20upx 20upx;
	margin-top: 40upx;
	margin-left: 26upx;
	position: relative;
	z-index: 1;
	image {
		border-radius: 20upx 20upx 20upx 20upx;
	}
	.delimg {
		position: absolute;
		right: -20rpx;
		top: -20rpx;
		z-index: 2;
		width: 40rpx;
		height: 40rpx;
		background: url(@/static/delImg.png);
		background-size: 100% 100%;
	}
}
.up_img_box {
	width: 224upx;
	height: 224upx;
	background: #f1f1f1;
	border-radius: 20upx 20upx 20upx 20upx;
	margin-top: 40upx;
	margin-left: 32upx;
	overflow: hidden;

	.xianji_img {
		margin: 76upx auto;
	}
}
</style>
